<template>
  <div class="all">
    <div class="infodiv">
      <h2>基本信息 <span>(可修改用户名和手机号)</span></h2>
      <div class="item">
        <div class="fixed_item">用户名:</div>
        <div v-if="!ifchangeusername" class="item_info">{{ username }}</div>
        <el-input
          class="input_info"
          v-if="ifchangeusername"
          v-model="username"
          placeholder="请输入您的新用户名"
          clearable
        />
        <div
          v-if="!ifchangeusername"
          class="ifchange"
          @click="ifchangeusername = true"
        >
          修改
        </div>
        <div
          v-if="ifchangeusername"
          class="ifchange"
          @click="ifchangeusername = false"
        >
          保存
        </div>
      </div>
      <div class="item">
        <div class="fixed_item">真实姓名:</div>
        <div class="item_info">{{ name }}</div>
      </div>
      <div class="item">
        <div class="fixed_item">电话号码:</div>
        <div v-if="!ifchangephone" class="item_info">{{ phone }}</div>
        <el-input
          class="input_info"
          v-if="ifchangephone"
          v-model="phone"
          placeholder="请输入您的新电话"
          clearable
        />
        <div
          v-if="!ifchangephone"
          class="ifchange"
          @click="ifchangephone = true"
        >
          修改
        </div>
        <div
          v-if="ifchangephone"
          class="ifchange"
          @click="ifchangephone = false"
        >
          保存
        </div>
      </div>
      <div class="item">
        <div class="fixed_item">性别:</div>
        <div class="item_info">{{ sex }}</div>
      </div>
      <div class="item">
        <div class="fixed_item">年龄:</div>
        <div class="item_info">{{ age }}</div>
      </div>
      <div class="item">
        <div class="fixed_item">邀请码:</div>
        <div class="item_info">{{ id }}</div>
      </div>
      <div class="item">====邀请码用于邀请小组成员进入自己的项目====</div>
    </div>
  </div>
</template>

<script>
import { onMounted, onUnmounted, ref } from "vue";
import axios from "axios";
import { useStore } from "vuex";
export default {
  name: "Personinfo",
  setup() {
    let username = ref("");
    let name = ref("");
    let phone = ref("");
    let sex = ref("");
    let age = ref("");
    let id = ref("");

    let ifchangeusername = ref(false);
    let ifchangephone = ref(false);

    const store = useStore();

    onMounted(() => {
      if(store.state.real_Item == ""){
        let data = JSON.parse(sessionStorage.getItem('cloud'))
         store.commit('useSessionStorage',[data.ItemID,data.DemandList,data.ItemList,data.main_person,data.real_Item,data.usernow,data.real_Demand])
      }
      username.value = store.state.usernow.username;
      name.value = store.state.usernow.name;
      phone.value = store.state.usernow.phone;
      sex.value = store.state.usernow.sex;
      age.value = store.state.usernow.age;
      id.value = store.state.usernow.id;
    });

    onUnmounted(() => {
      axios
        .get(
          `https://qcjk2s.api.cloudendpoint.cn/changeuerinfo?id=${id.value}&name=${username.value}&phone=${phone.value}`
        )
        .then(
          (res) => {
            console.log("win");
          },
          (err) => {
            console.log(err.message);
          }
        );
    });

    return {
      username,
      name,
      phone,
      sex,
      age,
      id,
      ifchangeusername,
      ifchangephone,
    };
  },
};
</script>

<style lang="less" scoped>
.all {
  height: 100%;
  width: 99.9%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #409efc;
  .infodiv {
    width: 80%;
    height: 90%;
    h2 {
      span {
        font-size: 16px;
      }
    }
    .item {
      margin-top: 2%;
      width: 100%;
      height: 7%;
      font-size: 18px;
      .fixed_item {
        width: 40%;
        height: 100%;
        float: left;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-right: 5%;
      }
      .item_info {
        float: left;
        width: 40%;
        height: 100%;
        margin-left: 5%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
      }
      .input_info {
        float: left;
        width: 35%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
      }
      .ifchange {
        display: none;
        width: 10%;
        float: left;
        cursor: pointer;
        margin-top: 1%;
      }
      &:hover .ifchange {
        display: block;
      }
    }
  }
}
</style>